<template>
    <v-row align=start>
        <v-col cols=12>
            <v-dialog v-model="dialog_kindle" persistent width="300">
                <v-card>
                    <v-card-title class="">推送到Kindle</v-card-title>
                    <v-card-text>
                        <p>填写Kindle收件人邮箱地址：</p>
                        <v-text-field v-model="mail_to" label="Email*" required></v-text-field>
                        <small>* 请先将本站邮箱加入到Kindle发件人中:<br/>{{kindle_sender}}</small>
                    </v-card-text>
                    <v-card-actions>
                        <v-btn color="" text @click="dialog_kindle = false">取消</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" text @click="sendto_kindle">发送</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

            <v-dialog v-model="dialog_download" persistent width="300">
                <v-card>
                    <v-card-title color="primary" class="">下载书籍</v-card-title>
                    <v-card-text>
                        <v-list v-if="book.files.length > 0">
                            <v-list-item :key="'file-'+file.format" v-for="file in book.files" target="_blank" :href="file.href">
                                <v-list-item-avatar color='primary' >
                                    <v-icon dark >get_app</v-icon>
                                </v-list-item-avatar>
                                <v-list-item-content>
                                    <v-list-item-title>{{file.format}}</v-list-item-title>
                                    <v-list-item-subtitle>{{parseInt(file.size/1024)}} KB</v-list-item-subtitle>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list>
                        <p v-else><br/>本书暂无可供下载的文件格式 </p>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn text @click="dialog_download = false">关闭</v-btn>
                        <v-spacer></v-spacer>
                    </v-card-actions>
                </v-card>
            </v-dialog>

            <v-card v-if="dialog_refer" >
                <v-toolbar flat dense dark color="primary">
                    从互联网同步书籍信息
                    <v-spacer></v-spacer>
                    <v-btn outlined text @click="dialog_refer = false">取消</v-btn>
                </v-toolbar>
                <v-card-text xclass="pt-3 px-3 px-sm-6">
                    <p class="py-6 text-center" v-if="refer_books.length == 0">
                    <v-progress-circular indeterminate color="primary" ></v-progress-circular>
                    </p>

                    <template v-else>
                        请选择最匹配的记录复制为本书的描述信息
                        <book-cards :books="refer_books">
                            <template #actions="{book}">
                                <v-card-actions>
                                    <v-chip class="mr-1" small v-if="book.author_sort">{{book.author_sort}}</v-chip>
                                    <v-chip class="mr-1" small v-if="book.publisher">{{book.publisher}}</v-chip>
                                    <v-chip small v-if="book.pubyear">{{book.pubyear}}</v-chip>
                                </v-card-actions>
                                    <v-divider></v-divider>
                                <v-card-actions>
                                    <v-chip small dark :to="book.website" :color="book.source=='豆瓣'?'green':'blue'">{{book.source}}</v-chip>
                                    <v-spacer></v-spacer>
                                    <v-btn color='primary' small rounded @click="set_refer(book.isbn)" ><v-icon >done</v-icon>设置</v-btn>
                                </v-card-actions>
                            </template>
                        </book-cards>
                    </template>
                </v-card-text>
            </v-card>

            <v-card v-if="!dialog_refer">
                <v-toolbar flat dense color="white" >
                    <!-- download -->
                    <v-btn icon small fab @click="dialog_download = true" ><v-icon>get_app</v-icon></v-btn>
                    <v-btn class="d-none" icon small fab > <v-icon>thumb_up</v-icon> </v-btn>
                    <v-btn class="d-none" icon small fab > <v-icon>share</v-icon> </v-btn>


                    <v-spacer></v-spacer>
                    <v-btn :small="tiny" dark color="primary" class="mx-2 d-flex d-sm-flex"
                            @click="dialog_kindle = !dialog_kindle" ><v-icon left v-if="!tiny">email</v-icon> 推送</v-btn>
                    <v-btn :small="tiny" dark color="primary" class="mx-2 d-flex d-sm-flex"
                            :href="'/read/'+bookid" target="_blank"> <v-icon left v-if="!tiny">import_contacts</v-icon> 阅读</v-btn>

                    <v-menu v-if="book.is_owner" offset-y>
                        <template v-slot:activator="{on}">
                            <v-btn v-on="on" dark color="primary" class="ml-2" :small="tiny" >管理 <v-icon small >more_vert</v-icon></v-btn>
                        </template>
                        <v-list>
                            <v-list-item :to="'/book/'+bookid+'/edit'"> <v-icon>settings_applications</v-icon> 编辑书籍信息 </v-list-item>
                            <v-list-item @click="get_refer" > <v-icon>apps</v-icon> 从豆瓣更新信息</v-list-item>
                            <v-divider></v-divider>
                            <v-list-item @click='delete_book' > <v-icon>delete_forever</v-icon> 删除此书</v-list-item>
                        </v-list>
                    </v-menu>
                </v-toolbar>
                <v-row>
                    <v-col class="ma-auto" cols=8 sm=4>
                        <v-img class="book-img" :src="book.img" :aspect-ratio="11/15" max-height="500px" contain ></v-img>
                    </v-col>
                    <v-col cols=12 sm=8>
                        <v-card-text>
                            <div>
                            <p class='title mb-0'>{{book.title}}</p>
                            <span color="grey--text">{{book.author}}著，{{pub_year}}年版</span>
                            </div>
                            <v-rating v-model="book.rating" color="yellow accent-4" length="10" readonly dense small></v-rating>
                            <br/>
                            <div class='tag-chips'>
                                <template v-for="author in book.authors">
                                <v-chip rounded small dark color="indigo" :to="'/author/'+author" :key="'author-'+author">
                                    <v-icon>face</v-icon>
                                    {{author}}
                                </v-chip>
                                </template>
                                <v-chip rounded small dark color="indigo" :to="'/publisher/'+book.publisher" >
                                    <v-icon>group</v-icon>
                                    出版：{{book.publisher}}
                                </v-chip>
                                <v-chip rounded small dark color="indigo" v-if="book.series" :to="'/series/'+book.series" >
                                    <v-icon>explore</v-icon>丛书: {{book.series}}
                                </v-chip>
                                <v-chip rounded small dark color="grey" v-if="book.isbn" >
                                    <v-icon>explore</v-icon>ISBN：{{book.isbn}}
                                </v-chip>
                                <template v-for="tag in book.tags" >
                                <v-chip rounded small dark color="grey" :key="'tag-'+tag" v-if="tag" :to="'/tag/'+tag" >
                                    <v-icon>loyalty</v-icon> {{tag}}
                                </v-chip>
                                </template>
                            </div>
                        </v-card-text>
                        <v-card-text>
                            <p v-if="book.comments" v-html="book.comments"></p>
                            <p  v-else>点击浏览详情</p>
                        </v-card-text>
                    </v-col>
                </v-row>
                <v-card-text class="align-right book-footer" >
                    <span class="grey--text">
                    {{book.collector}} @ {{book.timestamp}}
                    </span>
                </v-card-text>
            </v-card>
        </v-col>
        <v-col cols=12 sm=6 md=4>
            <v-card outlined>
                <v-list>
                    <v-list-item :href="'/read/'+bookid" >
                        <v-list-item-avatar large color='primary' >
                            <v-icon dark >import_contacts</v-icon>
                        </v-list-item-avatar>
                        <v-list-item-content>
                            <v-list-item-title>在线阅读</v-list-item-title>
                        </v-list-item-content>
                        <v-list-item-action>
                            <v-icon >mdi-arrow-right</v-icon>
                        </v-list-item-action>
                    </v-list-item>
                </v-list>
            </v-card>
        </v-col>
        <v-col cols=12 sm=6 md=4>
            <v-card outlined>
                <v-list>
                    <v-list-item @click="dialog_download = !dialog_download" >
                        <v-list-item-avatar large color='primary' >
                            <v-icon dark >get_app</v-icon>
                        </v-list-item-avatar>
                        <v-list-item-content>
                            <v-list-item-title>下载</v-list-item-title>
                        </v-list-item-content>
                        <v-list-item-action>
                            <v-icon >mdi-arrow-right</v-icon>
                        </v-list-item-action>
                    </v-list-item>
                </v-list>
            </v-card>
        </v-col>
        <v-col cols=12 sm=6 md=4>
            <v-card outlined>
                <v-list>
                    <v-list-item @click="dialog_kindle = !dialog_kindle" >
                        <v-list-item-avatar large color='primary' >
                            <v-icon dark >email</v-icon>
                        </v-list-item-avatar>
                        <v-list-item-content>
                            <v-list-item-title>推送至Kindle</v-list-item-title>
                        </v-list-item-content>
                        <v-list-item-action>
                            <v-icon >mdi-arrow-right</v-icon>
                        </v-list-item-action>
                    </v-list-item>
                </v-list>
            </v-card>
        </v-col>
    </v-row>
</template>

<script>
import BookCards from "../components/BookCards.vue";
export default {
    components: {
        BookCards,
    },
    computed: {
        pub_year: function() {
            if ( this.book === null || this.book.pubdate == null) {
                return "N/A";
            }
            return this.book.pubdate.split("-")[0];
        },
        tiny: function() {
            return this.$vuetify.breakpoint.xsOnly;
        },
    },
    data: () => ({
        bookid: 0,
        book: {'id': 0, 'files': [], 'tags': [], 'pubdate': ''},
        debug: false,
        mail_to: "",
        kindle_sender: "",
        dialog_download: false,
        dialog_kindle: false,
        dialog_refer: false,
        dialog_msg: false,
        refer_books: [],
    }),
    created() {
        this.init(this.$route);
        this.mail_to = this.$cookies.get("kindle_mail");
    },
    beforeRouteUpdate(to, from, next) {
        this.init(to, next);
    },
    methods: {
        init(route, next) {
            this.$store.commit('navbar', true);
            this.$store.commit('loading');
            this.bookid = route.params.bookid;
            this.backend("/book/"+this.bookid)
            .then( rsp => {
                if ( rsp.err != 'ok' ) {
                    this.alert("error", rsp.msg, "/");
                } else {
                    this.kindle_sender = rsp.kindle_sender;
                    this.book = rsp.book;
                    this.$store.commit('loaded');
                }
            });
            if ( next ) next();
        },
        sendto_kindle() {
            if ( ! this.$store.state.user.is_login ) {
                this.$router.push("/login");
                return;
            }
            this.$cookies.set("kindle_mail", this.mail_to);
            this.backend("/book/"+this.bookid+"/push", {
                method: "POST",
                body: "mail_to="+this.mail_to,
                headers: {
                    'Content-Type': "application/x-www-form-urlencoded",
                },
            }).then( rsp => {
                this.dialog_kindle = false;
                if ( rsp.err == 'ok' ) {
                    this.alert('success', rsp.msg);
                } else {
                    this.alert('error', rsp.msg);
                }
            });
        },
        get_refer() {
            this.dialog_refer = true;
            this.backend("/book/"+this.bookid+"/refer")
            .then( rsp => {
                this.refer_books = rsp.books.map( b => {
                    b.href = "";
                    b.img = '/get/pcover?url='+encodeURIComponent(b.cover_url);
                    return b;
                }) ;
            });
        },
        set_refer(isbn) {
            var data = new URLSearchParams();
            data.append('isbn', isbn);
            this.backend("/book/"+this.bookid+"/refer", {
                method: 'POST',
                body: data,
            })
            .then( rsp => {
                this.dialog_refer = false;
                if ( rsp.err == 'ok' ) {
                    this.alert('success', '设置成功！')
                } else {
                    this.alert('error', rsp.msg);
                }
                this.init(this.$route);
            });
        },
        delete_book() {
            this.backend('/book/'+this.bookid+'/delete', {
                method: 'POST'
            })
            .then( rsp => {
                if ( rsp.err == 'ok' ) {
                    this.alert("success", "删除成功");
                    this.$router.push("/");
                } else {
                    this.alert("error", rsp.msg);
                }
            })
        },
    },
}
</script>

<style>
.book-img {
    /*
    margin-left: 16px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.12);
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    */
}
.align-right {
    text-align: right;
}
.book-footer {
    padding-top: 0px;
    padding-bottom: 3px;
}
.tag-chips a {
    margin: 4px 2px;
}

.book-comments {
    /*text-indent: 2em;*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: clip;
    margin-top: 6px;
    text-align: left;
}
.book-comments p {
    font-size: small;
    margin-bottom: 0px;
}
h1.book-detail-title {
    line-height: inherit;
}
</style>
